<template>
	<view class="flex-box">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item>
				<image src="/static/other_icons/house-1.png" class="swiper-img"></image>
			</swiper-item>

			<swiper-item v-for="(item,i) in house_info.pics" :key="i">
				<image :src="item.pic" @click="preview(i)" class="swiper-img"></image>
			</swiper-item>
		</swiper>
		<!-- 房屋简介 -->
		<view class="house-info-box">
			<view class="top-title">
				<text class="onsale">在售</text>
				<text class="slogan">生态宜居·品质好房</text>
			</view>
			<view class="house-name">轻松之都</view>
			<!-- <view class="houses-info">{{houses.info}}</view> -->
			<view class="house-price">约220万元/套</view>
		</view>
		<view class="info-box-ow">
			<!-- 主力户型 -->
			<advanced-lable content="主力户型"></advanced-lable>
			<view class="main-type">
				<view class="main-type-item">
					<image src="" class="img"></image>
					<view class="main-type-info">
						<text class="top">三室二厅二卫</text>
						<text class="content">建面约100m²·干湿分离·双卫·采光充足</text>
						<text class="price">0.8w/m²</text>
					</view>
				</view>
			</view>

			<!-- 基本信息 -->
			<advanced-lable content="基本信息"></advanced-lable>
			<view class="base-info">
				<view class="base-info-item">
					<view class="label">开盘时间</view>
					<view class="content">2021年12月12日</view>
				</view>
				<view class="base-info-item">
					<view class="label">物业类型</view>
					<view class="content">普通住宅</view>
				</view>
				<view class="base-info-item">
					<view class="label">预售证</view>
					<view class="content">深住建委(2021)预字第(1234)号</view>
				</view>
				<view class="base-info-item">
					<view class="label">建筑类别</view>
					<view class="content">多层</view>
				</view>
				<view class="base-info-item">
					<view class="label">装修情况</view>
					<view class="content">待定</view>
				</view>
				<view class="base-info-item">
					<view class="label">项目地址</view>
					<view class="content">龙华中心 轻松轻轨站旁</view>
				</view>
				<view class="base-info-item">
					<view class="label">售楼地址</view>
					<view class="content">深圳市龙华区轻松万象营销中心</view>
				</view>
			</view>

			<!-- 销售信息 -->
			<advanced-lable content="销售信息"></advanced-lable>
			<view class="base-info">
				<view class="base-info-item">
					<view class="label">占地面积</view>
					<view class="content">666666m²</view>
				</view>
				<view class="base-info-item">
					<view class="label">建筑面积</view>
					<view class="content">6666666m²</view>
				</view>
				<view class="base-info-item">
					<view class="label">产权</view>
					<view class="content">普通住宅50年</view>
				</view>
				<view class="base-info-item">
					<view class="label">户数</view>
					<view class="content">666户</view>
				</view>
				<view class="base-info-item">
					<view class="label">容积数</view>
					<view class="content">2.0</view>
				</view>
				<view class="base-info-item">
					<view class="label">绿化率</view>
					<view class="content">35%</view>
				</view>
				<view class="base-info-item">
					<view class="label">开发商</view>
					<view class="content">深圳市龙华区轻松万象有限公司</view>
				</view>
			</view>
			<!-- 建筑规划 -->
			<advanced-lable content="建筑规划"></advanced-lable>
			<view class="base-info">
				<view class="base-info-item-plus">
					<view class="top">
						<image src="/static/house_detail_icons/global.png" class="icon"></image>
						<text class="label">周边商业</text>
					</view>
					<view class="content">接驳千亿商圏，漫享多元，2公里内，3大商环伺（九宫庙商
						圈、万达广场、龙湖商业、金家湾轨道商业）周边交通西区
						枢纽之城，通达重庆任意门。</view>
				</view>
				<view class="base-info-item-plus">
					<view class="top">
						<image src="/static/house_detail_icons/car.png" class="icon"></image>
						<text class="label">周边交通</text>
					</view>
					<view class="content">2号线已通车，直达解放碑、杨家坪、鱼洞，5号线、18号线
						（规划中）接驳，通车后速达全城。</view>
				</view>
				<view class="base-info-item-plus">
					<view class="top">
						<image src="/static/house_detail_icons/hospital.png" class="icon"></image>
						<text class="label">周边医院</text>
					</view>
					<view class="content">大渡口区第二人民医院、大渡口区人民医院、妇幼保健院、
						重钢医院。</view>
				</view>
				<view class="base-info-item-plus">
					<view class="top">
						<image src="/static/house_detail_icons/global.png" class="icon"></image>
						<text class="label">周边学校</text>
					</view>
					<view class="content">轻松九十五中、轻松小学、轻松实验幼儿园</view>
				</view>
			</view>
			<!-- 联系客服 -->
			<view class="help-info">
				<view class="customer-service" @click="getIntoService()">
					<image src="/static/house_detail_icons/service.png" class="icon"></image>
					<text class="title">客服</text>
				</view>
				<button class="btn" @click="callPhone()">电话咨询</button>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				house_info: {}
			};
		},
		onLoad(options) {
			const house_id = options.house_id
		},
		methods: {
			async getHouseDetail(house_id) {
				const {
					data: res
				} = await uni.$http.get('api', {
					house_id: house_id
				})
				if (res.meta.status !== 200) return uni.$showMsg()
				this.house_info = res.house_info
			},
			//实现轮播图预览效果
			preview(i) {
				uni.previewImage({
					current: i,
					//所有图片地址的数组
					urls: this.house_info.pics.map(x => x.pic)
				})
			},
			callPhone() {
				uni.showActionSheet({
					itemList: ['198-1234-5678','呼叫'],
					success: function(res) {
						if(res.tapIndex===1){
							uni.makePhoneCall({
							    phoneNumber: '198-1234-5678' 
							});
							console.log(res);
						}
						
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				})
			},
			getIntoService(){
				uni.navigateTo({
					url:'/minepkg/customer_service/customer_service'
				})
			}
		}
	}
</script>

<style lang="scss">
	swiper {
		height: 750rpx;

		.swiper-img {
			width: 100%;
			height: 100%;
		}
	}

	.flex-box {
		// background: #FFFFFF;
		display: flex;
		flex-direction: column;

		.info-box-ow {
			padding: 26rpx 30rpx 0 30rpx;
		}
	}

	.house-info-box {
		background: #FFFFFF;
		display: flex;
		flex-direction: column;

		.top-title {
			display: flex;
			flex-direction: row;
			font-size: 24rpx;

			.onsale {
				margin-left: 30rpx;
				border-radius: 4rpx;
				background: linear-gradient(90deg, #E93423 0%, #FB6858 100%);
				color: #FFFFFF;
				width: 60rpx;
				text-align: center;
			}

			.slogan {
				margin-left: 20rpx;
				color: #333333;
			}
		}

		.house-name {
			margin-top: 25rpx;
			margin-left: 20rpx;
			font-weight: bold;
			color: #333333;
			font-size: 28rpx;
		}

		.house-price {
			font-weight: 500;
			font-size: 28rpx;
			color: #E62129;
			margin: 20rpx 0 20rpx 20rpx;
		}
	}

	.base-info {
		margin-top: 35rpx;
		background: #FFFFFF;
		margin: 20rpx 0 20rpx 0;
		border: 1rpx solid #EBEEF5;
		border-radius: 20rpx;

		.base-info-item {
			height: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid #EBEEF5;
			font-size: 28rpx;
			font-weight: 500;

			.label {
				margin-left: 20rpx;
				color: #333333;
				width: 160rpx;

			}

			.content {
				margin-left: 60rpx;
				color: #999999;
			}
		}

		.base-info-item-plus {
			display: flex;
			flex-direction: column;
			padding: 30rpx 20rpx;
			border-bottom: 1rpx solid #EBEEF5;

			.top {
				display: flex;
				flex-direction: row;
				margin-bottom: 25rpx;

				.icon {
					width: 30rpx;
					height: 30rpx;
				}

				.label {
					margin-left: 15rpx;
					font-size: 24rpx;
				}
			}
		}
	}

	.help-info {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 16rpx;
		.customer-service {
			display: flex;
			flex-direction: column;
			margin-left: 35rpx;

			.icon {
				width: 35rpx;
				height: 35rpx;
			}

			.title {
				font-size: 22rpx;
			}
		}

		.btn {
			margin-right: 0;
			color: #FFFFFF;
			border-radius: 80rpx;
			width: 360rpx;
			background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
		}
	}

	.main-type {
		background: #FFFFFF;
		margin: 20rpx 0 20rpx 0;
		border: 2rpx solid #EBEEF5;
		border-radius: 20rpx;

		.main-type-item {
			display: flex;
			flex-direction: row;
			padding: 20rpx;

			.img {
				width: 180rpx;
				height: 180rpx;
				border: 1rpx solid #EBEEF5;
				border-radius: 20rpx;
			}

			.main-type-info {
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;

				.top {
					align-self: flex-start;
					color: #333333;
					font-size: 30rpx;
				}

				.content {
					margin-top: 22rpx;
					color: #999999;
					font-size: 24rpx;
				}

				.price {
					margin-top: 40rpx;
					color: #E62129;
				}
			}

		}
	}
</style>
